<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="../../css/style.css">

</head>
<body>
    <div id="app">
        <div class="container">
            <div class="form-group">
                <label>Search</label>
                <input type="text" class="search-input" v-model="searchQuery"/>
            </div>
        </div>
        <div class="container">
            <simple-grid :data-list="people" :columns="columns" :search-key="searchQuery"></simple-grid>
        </div>
    </div>

    <template id="grid-template">
        <table>
            <thead>
                <tr>
                    <th v-for="col in columns">
                        {{ col.name | capitalize}}
                    </th>
                    <th>
                        Delete
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(index, entry) in dataList | filterBy searchKey">
                    <td v-for="col in columns">
                        <span v-if="col.isKey">
                            <a href="javascript:void(0)" @click="openEditItemDialog(entry[col.name])">{{entry[col.name]}}</a>
                        </span>
                        <span v-else>{{entry[col.name]}}</span>
                    </td>
                    <td class="text-center">
                        <button class="btn-danger" @click="deleteItem(entry)">delete</button>
                    </td>
                </tr>
            </tbody>
        </table>

        <!--create a dialog-->
        <div class="container">
            <button @click="openNewItemDialog('Create New Item')">Create</button>
        </div>

        <!--//dialog-->
        <modal-dialog :mode="mode" :title="title" :item="item" :fields="columns" v-on:create-item="createItem" v-on:update-item="updateItem">
        </modal-dialog>
    </template>

    <template id="dialog-template">
        <div class="dialogs">
            <div class="dialog" :class="{'dialog-active':show}">
                <div class="dialog-content">
                    <header class="dialog-header">
                        <h1 class="dialog-title">{{title}}</h1>
                    </header>

                    <div class="dialog-body">
                        <div v-for="field in fields" class="form-group">
                            <label>{{field.name}}</label>
                            <select v-if="field.dataSource" v-model="item[field.name]" :disabled="mode === 2 && field.isKey">
                                <option v-for="opt in field.dataSource" :value="opt">{{opt}}</option>
                            </select>
                            <input v-else type="text" v-model="item[field.name]" :disabled="mode === 2 && field.isKey">
                        </div>
                    </div>

                    <footer class="dialog-footer">
                        <div class="form-group">
                            <label></label>
                            <button class="btn-save" @click="save">Save</button>
                            <button class="btn-close" @click="close">Close</button>
                        </div>
                    </footer>
                </div>
            </div>
            <div class="dialog-overlay"></div>
        </div>
    </template>

    <script src="../../js/vue.js"></script>
    <script>
        Vue.component('simple-grid',{
            template: '#grid-template',
            props: ['dataList','columns','searchKey'],
            data: function(){
                return {
                    mode: 0,
                    title: '',
                    keyColumn:'',
                    item:{}
                }
            },
            ready: function() {
                for(var i = 0; i < this.columns.length; i++){
                    if (this.columns[i].isKey) {
                        this.keyColumn = this.columns[i]['name'];
                        break;
                    }
                }
            },
            methods: {
                deleteItem: function (entry) {
                    var data = this.dataList;
                    data.forEach(function (item,i) {
                        if (item === entry) {
                            data.splice(i, 1);
                        }
                    })
                },
                openNewItemDialog: function (title) {
                    this.title = title;
                    //mode = 1 表示新建模式
                    this.mode = 1;
                    this.item = {};
                    this.$broadcast('showDialog', true);
                },
                openEditItemDialog: function (key) {
                    //根据主键查找当前修改的数据
                    var currentItem = this.findItemByKey(key);
                    this.title = 'Edit Item - ' + key;
                    this.mode= 2;
                    this.item = this.initItemForUpdate(currentItem);
                    this.$broadcast('showDialog', true);
                },
                initItemForUpdate: function(p, c) {
                    c = c || {};
                    for (var i in p) {
                        //属性i 是否为p对象自有属性
                        if (p.hasOwnProperty(i)) {
                            if (typeof p[i] === 'object') {
                                c[i] = Array.isArray(p[i]) ? [] : {};
                                this.initItemForUpdate(p[i], c[i]);
                            } else {
                                c[i] = p[i];
                            }
                        }
                    }
                    return c;
                },
                findItemByKey: function (key) {
                    var keyColumn = this.keyColumn;
                    for (var i = 0; i < this.dataList.length; i++){
                        if (this.dataList[i][keyColumn] === key) {
                            return this.dataList[i];
                        }
                    }
                },
                itemExists: function () {
                    var keyColumn = this.keyColumn;
                    for (var i = 0; i < this.dataList.length; i++){
                        if (this.item[keyColumn] === this.dataList[i][keyColumn]) {
                            return true;
                        }
                        return false;
                    }
                },
                createItem: function () {
                    var keyColumn = this.keyColumn;
                    if (!this.itemExists()) {
                        this.dataList.push(this.item);
                        this.$broadcast('showDialog', false);
                        this.item = {};
                    } else {
                        alert(keyColumn + '"' + this.item[keyColumn] + '"is already exists');
                    }
                },
                updateItem: function () {
                    var keyColumn = this.keyColumn;
                    for (var i = 0; i < this.dataList.length; i++) {
                        if (this.dataList[i][keyColumn] === this.item[keyColumn]) {
                            for (var j in this.item) {
                                this.dataList[i][j] = this.item[j];
                            }
                            break;
                        }
                    }
                    this.$broadcast('showDialog', false);
                }
            },

            components: {
                'modal-dialog': {
                    template: '#dialog-template',
                    data: function () {
                        return {
                            //对话框默认不显示
                            show: false
                        }
                    },
                    props: ['mode','title','fields','item'],
                    methods: {
                        close: function () {
                            this.show = false;
                        },
                        save: function () {
                            if (this.mode === 1) {
                                // 使用$dispatch调用simple-grid的create-item事件
                                this.$dispatch('create-item')
                            } else if (this.mode === 2) {
                                // 使用$dispatch调用simple-grid的update-item事件
                                this.$dispatch('update-item')
                            }
                        }
                    },
                    events: {
                        'showDialog': function (show) {
                            this.show = show;
                        }
                    }
                }
            }
        });

        var demo = new Vue({
            el: '#app',
            data: {
                searchQuery: '',
                columns: [{
                    name: 'name',
                    isKey: true
                }, {
                    name: 'age'
                }, {
                    name: 'sex',
                    dataSource: ['Male','Female']
                }],
                people: [{
                    name: 'Jack',
                    age: 30,
                    sex: 'Male'
                }, {
                    name: 'Bill',
                    age: 26,
                    sex: 'Male'
                }, {
                    name: 'Tracy',
                    age: 22,
                    sex: 'Female'
                }, {
                    name: 'Chris',
                    age: 36,
                    sex: 'Male'
                }]
            }
        })
    </script>

</body>
</html>